<template>
    <div v-if="project">
        <PageTitle>
            <h1>{{ project.name }}</h1>
        </PageTitle>

        <SummaryBar v-if="summary" :summaryData="summary"></SummaryBar>

        <Expandable name="Details">
            <ProjectDetails :project="project"></ProjectDetails>
        </Expandable>

        <Expandable name="Tasks">
            <Tasks :tasks="project.tasks"></Tasks>
        </Expandable>
        <Expandable name="Discussions">
            <Discussions :discussions="project.discussions"></Discussions>
        </Expandable>

        <Expandable name="Documents">
            <Document :documents="project.documents"></Document>
        </Expandable>

        <Expandable name="Gallery">
            <Gallery :gallery-items="project.gallery_items"></Gallery>
        </Expandable>
    </div>
</template>
<script>
    import axios from 'axios'
    import dateFormat from 'dateformat'
    import Expandable from './Expandable.vue'
    import Discussions from './Discussions.vue'
    import Document from './Document.vue'
    import Gallery from './Gallery.vue'
    import ProjectDetails from './ProjectDetails.vue'
    import KeyValue from './KeyValue.vue'
    import PageTitle from './PageTitle.vue'
    import Panel from './Panel.vue'
    import SummaryBar from './SummaryBar.vue'
    import Tabs from './Tabs.vue'
    import Tab from './Tab.vue'
    import Tasks from './Tasks.vue'

    export default {

        components: {
            Expandable,
            KeyValue,
            Discussions,
            Document,
            Gallery,
            ProjectDetails,
            PageTitle,
            Panel,
            SummaryBar,
            Tabs,
            Tab,
            Tasks
        },

        data() {
            return {
                project: null,
                summary: null
            }
        },

        mounted: function() {

        },

        methods: {
            fetchData: function() {
                var self = this;

                axios.get(process.env.API_ROOT + '/projects/' + this.$route.params.id, {
                })
                    .then(function(response) {
                        self.project = response.data;
                    });

                axios.get(process.env.API_ROOT + '/project-summary/' + this.$route.params.id, {
                })
                    .then(function(response) {
                        self.summary = response.data;
                    });
            },
        },

        created() {
            this.fetchData()
        },

        watch: {
            '$route': 'fetchData'
        }

    }
</script>
